<template>
  <div class="xct-container">
    <vm-common-header :pageTitle="pageTitle" :goBack="goBack"></vm-common-header>
    <div class="xct-body-container">
      <common-btn/>
      <div class="xct-main-container">
        <div class="xct-desc-container">
          <p
            class="xct-desc"
          >信采通主要服务对象为大企业采购类会员，是企业利用沃库工业网的优势来进行企业物资设备采购，平台采购有两种方式，一是线上线下配合技术交流直接采购，二是线上招投标采购，平台优势：平台供应产品企业为同类产品国内排名前20、国际前10的知名品牌；直接对接产品制造企业，通过线下现场技术交流和服务，降低成本、提高产品质量、提高服务质量、提高采购效率；直接采购可以通过选型报价订购系统快速订购到企业需要的产品型号、配置、规格、价格等；在线招投标解决招投标效率，大大降低了企业投标招标成本，降低了评标成本，提升企业的投标管理和审查水平，加快了企业生产建设及工程建设的速度。</p>
          <p class="xct-desc">根据信采通会员实现累计交易额度的增加，信采通产品划分为标准会员、银牌会员、金牌会员、金钻会员。</p>
        </div>
        <div class="xct-level-introduce">
          <ul class="xct-level-ul">
            <li>
              <i class="xct-icon xct-icon-level-1"></i>
              <p>标准会员</p>
            </li>
            <li>
              <i class="xct-icon xct-icon-level-2"></i>
              <p>银牌</p>
            </li>
            <li>
              <i class="xct-icon xct-icon-level-3"></i>
              <p>金牌</p>
            </li>
            <li>
              <i class="xct-icon xct-icon-level-4"></i>
              <p>金钻</p>
            </li>
            <li>
              <i class="xct-icon xct-icon-level-5"></i>
              <p>蓝钻</p>
            </li>
          </ul>
          <div class="xct-suit">
            <ul class="company-suit-ul">
              <li>1</li>
              <li>10</li>
              <li>8</li>
              <li>5</li>
              <li>3</li>
            </ul>
            <ul class="user-suit-ul">
              <li>10</li>
              <li>80</li>
              <li>50</li>
              <li>30</li>
              <li>20</li>
            </ul>
            <ul class="legend-ul">
              <li class="company-legend">
                <i></i>
                <span>分公司规模</span>
              </li>
              <li class="user-legend">
                <i></i>
                <span>用户数</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="xct-introduce-table">
          <table style="width: 100%" border="1">
            <tbody>
              <tr>
                <td>模块</td>
                <td>功能</td>
                <td>会员</td>
              </tr>
              <tr>
                <td rowspan="4">系统集成</td>
                <td>AP接口:与ERP/OA集成</td>
                <td class="icon-td">
                  <ul class="clearfix">
                    <li>
                      <i class="xct-icon xct-icon-level-5-small"></i>
                    </li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>邮件平台</td>
                <td class="icon-td">
                  <ul class="clearfix">
                    <li>
                      <i class="xct-icon xct-icon-level-5-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-4-small"></i>
                    </li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>短信平台</td>
                <td class="icon-td">
                  <ul class="clearfix">
                    <li>
                      <i class="xct-icon xct-icon-level-5-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-4-small"></i>
                    </li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>客户端</td>
                <td class="icon-td">
                  <ul class="clearfix">
                    <li>
                      <i class="xct-icon xct-icon-level-5-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-4-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-3-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-2-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-1-small"></i>
                    </li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>app</td>
                <td>移动管理</td>
                <td class="icon-td">
                  <ul class="clearfix">
                    <li>
                      <i class="xct-icon xct-icon-level-5-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-4-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-3-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-2-small"></i>
                    </li>
                    <li>
                      <i class="xct-icon xct-icon-level-1-small"></i>
                    </li>
                  </ul>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <common-btn/>
    </div>
  </div>
</template>
<script>
import vmCommonHeader from "@/components/vm-common-header.vue";
import commonBtn from "./components/common-btn.vue";
export default {
  components: {
    "vm-common-header": vmCommonHeader,
    [commonBtn.name]: commonBtn
  },
  data() {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack
    };
  }
};
</script>
<style lang="scss" scoped>
.xct-icon {
  display: block;
  background: url("../../../static/images/xct-yct-icon.png") no-repeat;
  background-size: 771px 534px;
}

.xct-icon-level-1 {
  width: 70px;
  height: 70px;
  background-position: -70px -54px;
}

.xct-icon-level-1-small {
  width: 40px;
  height: 40px;
  background-position: -86px -190px;
}

.xct-icon-level-2 {
  width: 70px;
  height: 70px;
  background-position: -188px -54px;
}

.xct-icon-level-2-small {
  width: 40px;
  height: 40px;
  background-position: -167px -190px;
}

.xct-icon-level-3 {
  width: 70px;
  height: 70px;
  background-position: -317px -54px;
}

.xct-icon-level-3-small {
  width: 40px;
  height: 40px;
  background-position: -250px -190px;
}

.xct-icon-level-4 {
  width: 70px;
  height: 70px;
  background-position: -446px -54px;
}

.xct-icon-level-4-small {
  width: 40px;
  height: 40px;
  background-position: -332px -190px;
}

.xct-icon-level-5 {
  width: 70px;
  height: 70px;
  background-position: -575px -54px;
}

.xct-icon-level-5-small {
  width: 40px;
  height: 40px;
  background-position: -414px -190px;
}

.xct-body-container {
  height: 100%;
  overflow-y: scroll;
}
.xct-main-container {
  padding: 0 20px;
  margin: 16px 0;
  background-color: #fff;
  overflow: hidden;

  .xct-desc-container {
    padding: 60px 65px 50px 65px;
    border-bottom: 1px solid #eee;
    p {
      font-size: 28px;
      color: #666666;
      text-align: left;
      text-indent: 2em;
    }
  }

  .xct-level-introduce {
    padding: 60px 0px 50px 0px;

    .xct-level-ul {
      display: flex;
      padding: 0 40px;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
      li {
        flex: 1;
        text-align: center;
        i {
          margin: 0 auto;
          margin-bottom: 16px;
        }
        p {
          font-size: 28px;
          color: #333;
        }
      }
    }

    .xct-suit {
      .company-suit-ul {
        background-color: #d8f8ff;
        height: 108px;
        display: flex;
        align-items: center;

        li {
          flex: 1;
          font-size: 28px;
          line-height: 40px;
          color: #666;
        }
      }

      .user-suit-ul {
        background-color: #e8e6ff;
        height: 108px;
        display: flex;
        align-items: center;

        li {
          flex: 1;
          font-size: 28px;
          line-height: 40px;
          color: #666;
        }
      }

      .legend-ul {
        display: flex;
        margin-top: 38px;
        li {
          flex: 1;
          i {
            display: inline-block;
            height: 20px;
            width: 43px;
            border-radius: 4px;
          }

          &.company-legend i {
            background-color: #d8f8ff;
          }

          &.user-legend i {
            background-color: #e8e6ff;
          }
          span {
            font-size: 28px;
            line-height: 28px;
            color: #666;
          }
        }
      }
    }
  }
  .xct-introduce-table {
    table {
      margin-bottom: 50px;
      border-color: #999;
      border: 1px solid #999;
      td {
        color: #666;
        font-size: 28px;
        height: 86px;
        line-height: 42px;
        padding: 22px;
      }

      .icon-td {
        width: 280px;
        padding: 22px 0px;
        ul li {
          text-align: center;
          float: right;
          width: 50px;
        }
      }
    }
  }
}
</style>
